import { FC } from "react";
import { QuestionInfoDefaultProps, QuestionInfoPropsType } from "./interface";
import { Typography } from "antd";

const { Title, Paragraph } = Typography;

const Component: FC<QuestionInfoPropsType> = (props) => {
  const { title = "", desc = "" } = {
    ...QuestionInfoDefaultProps,
    ...props,
  };

  const descList = desc?.split("\n");

  return (
    <div style={{ textAlign: "center" }}>
      <Title
        level={2}
        style={{
          fontSize: "24px",
        }}
      >
        {title}
      </Title>
      <Paragraph
        style={{
          marginBottom: "0",
        }}
      >
        {descList.map((t, tIndex) => (
          <span key={tIndex}>
            {tIndex > 0 && <br />}
            {t}
          </span>
        ))}
      </Paragraph>
    </div>
  );
};

export default Component;
